<template>
  <a-card :bordered="false">
    <div class="table-page-search-wrapper">
      <a-form layout="inline">
        <a-row :gutter="24">
          <a-col :xl="6" :lg="7" :md="8" :sm="24">
            <a-form-item label="进货单号">
              <a-input disabled="" v-model="purchaseNumber"></a-input>
            </a-form-item>
          </a-col>
          <a-col :xl="6" :lg="7" :md="8" :sm="24">
            <a-form-item label="供应商">
              <a-select placeholder="请输入供应商" v-model="searchForm.supplierId">
                <a-select-option
                  :key="item.supplierId"
                  v-for="item in supplier_option"

                  :value="item.supplierId"
                >{{ item.supplierName }}
                </a-select-option>
              </a-select>
            </a-form-item>
          </a-col>
          <a-col :xl="6" :lg="7" :md="8" :sm="24">
            <a-form-item label="应付金额">
              <a-input placeholder="0" v-model="searchForm.amountPayable"></a-input>
            </a-form-item>
          </a-col>
          <a-col :xl="6" :lg="7" :md="8" :sm="24">
            <a-form-item label="实付金额">
              <a-input placeholder="0" v-model="searchForm.amountPaid"></a-input>
            </a-form-item>
          </a-col>
          <a-col :xl="6" :lg="7" :md="8" :sm="24">
            <a-form-item label="付款">
              <a-select placeholder="是否付款" v-model="searchForm.state">
                <a-select-option
                  :key="item.id"
                  v-for="item in state_option"
                  :value="item.id"

                >{{ item.value }}
                </a-select-option>
              </a-select>
            </a-form-item>
          </a-col>

          <a-col :xl="10" :lg="11" :md="12" :sm="24">
            <a-form-item label="收货日期">
              <j-date placeholder="请输入收货时间" class="query-group-cust" v-model="searchForm.purchaseDate"></j-date>
            </a-form-item>
          </a-col>
          <a-col :xl="6" :lg="7" :md="8" :sm="24">
            <a-button type="primary" @click="save">保存</a-button>
          </a-col>

        </a-row>

      </a-form>
    </div>
    <div class="table-operator">
      <a-button type="primary" icon="plus" @click="showModal">新增</a-button>
    </div>

    <span slot="isState" slot-scope="text,record">
      {{ record.state == 1 ? '已付款' : '未付款' }}
    </span>

    <a-table :columns="goodsColumns"
             :row-key="record => record.id"
             :dataSource="goodsDataSource"
             :pagination="false">
    </a-table>

    <a-modal v-model:visible="visible"
             width="1000px"
             title="进货入库商品选择"
             destroyOnClose
             mask
             @cancel="handleCancel">
      <div class="table-page-search-wrapper">
        <a-form layout="inline">
          <a-row :gutter="24">
            <a-col :xl="6" :lg="7" :md="8" :sm="24">
              <a-form-item label="商品名称">
                <a-input placeholder="商品名称" v-model="searchForm.goodsName"></a-input>
              </a-form-item>
            </a-col>
            <!--     商品父节点-->
            <a-col :xl="6" :lg="7" :md="8" :sm="24">
              <a-form-item label="商品类别">
                <a-select placeholder="请选择">
                  <a-select-option
                    v-for="item in goodsType"
                    :key="item.goodsTypeId"
                    :value="item.goodsTypeId"
                    @click="getGoodsType(item.goodsTypeId)">
                    {{ item.goodsTypeName }}
                  </a-select-option>
                </a-select>
              </a-form-item>
            </a-col>
            <!--            商品子节点-->
            <a-col :xl="6" :lg="7" :md="8" :sm="24">
              <a-form-item label="商品子类别">
                <a-select placeholder="请选择" v-model="searchForm.goodsTypeId">
                  <a-select-option
                    v-for="item in goodsChildType"
                    :key="item.goodsTypeId"
                    :value="item.goodsTypeId"
                    @click="getGoodsType(item.goodsTypeId)">
                    {{ item.goodsTypeName }}
                  </a-select-option>
                </a-select>
              </a-form-item>
            </a-col>
            <a-col :xl="6" :lg="7" :md="8" :sm="24">
              <a-button type="primary" @click="getGoodsList">查询</a-button>
              <a-button type="primary" @click="refresh">重置</a-button>
            </a-col>
          </a-row>
        </a-form>
      </div>
      <a-table :columns="goodsModalColumns"
               :row-key="record => record.id"
               :dataSource="goodsModalSource"
               :pagination="false">
        <span slot="action" slot-scope="text,record">
          <a-button size="small" type="primary" @click="showDrawer(record.goodsId)">添加</a-button>
        </span>
      </a-table>
      <a-pagination v-model="searchForm.current" :total="searchForm.total" @change="onChange"
                    :pageSize="searchForm.pageSize" show-less-items/>


    </a-modal>
    <!--    第二个魔态框，提交商品订单-->
    <a-modal v-model:visible="visible2"
             width="600px" :body-style="bodystyle"
             title="选择商品"
             @ok="Ok"
             @cancel="handleCancel"
    >
      <div class="table-page-search-wrapper">
        <a-form layout="inline">
          <a-row :gutter="24">

            <a-col :xl="10" :lg="11" :md="12" :sm="24">
              <a-form-item label="商品编号">
                <a-input placeholder="0" disabled v-model="Goods.goodsCode"></a-input>
              </a-form-item>
            </a-col>
            <a-col :xl="10" :lg="11" :md="12" :sm="24">
              <a-form-item label="商品名称">
                <a-input placeholder="0" disabled v-model="Goods.goodsName"></a-input>
              </a-form-item>
            </a-col>
            <a-col :xl="10" :lg="11" :md="12" :sm="24">
              <a-form-item label="商品型号">
                <a-input placeholder="0" disabled v-model="Goods.goodsModel"></a-input>
              </a-form-item>
            </a-col>
            <a-col :xl="10" :lg="11" :md="12" :sm="24">
              <a-form-item label="商品单位">
                <a-input placeholder="0" disabled v-model="Goods.goodsUnit"></a-input>
              </a-form-item>
            </a-col>
            <a-col :xl="10" :lg="11" :md="12" :sm="24">
              <a-form-item label="上次进价">
                <a-input placeholder="0" disabled v-model="Goods.lastPurchasingPrice"></a-input>
              </a-form-item>
            </a-col>

            <a-col :xl="10" :lg="11" :md="12" :sm="24">
              <a-form-item label="当前库存">
                <a-input placeholder="0" disabled v-model="Goods.inventoryQuantity"></a-input>
              </a-form-item>
            </a-col>

            <a-col :xl="10" :lg="11" :md="12" :sm="24">
              <a-form-item label="单价">
                <a-input placeholder="0" v-model="Goods.sellingPrice"></a-input>
              </a-form-item>
            </a-col>

            <a-col :xl="10" :lg="11" :md="12" :sm="24">
              <a-form-item label="数量">
                <a-input type="number" placeholder="0" v-model="Goods.goodsNum"></a-input>
              </a-form-item>
            </a-col>

          </a-row>
        </a-form>
      </div>
    </a-modal>
  </a-card>


</template>


<script>

import {getAction, postAction} from '@/api/manage'
import JDate from "../../../components/jeecg/JDate";


export default {
  components: {
    JDate,
    getAction,
    postAction,
  },
  data() {
    return {
      purchaseNumber:'',
      //第二个魔态框
      bodystyle: {//高度控制
        height: '480px',
        overflow: 'hidden',
        overflowY: 'scroll',
      },

      //隐藏控制
      visible2: false,
      Goods: {},//回填的数据

      //第一个魔态搜索框
      visible: false,
      goodsType: [],
      goodsChildType: [],
      goodsModalSource: [],
      goodsModalColumns: [
        {
          title: '商品编号',
          dataIndex: 'goodsId',
          key: 'goodsId',
        },
        {
          title: '商品名称',
          dataIndex: 'goodsName',
          key: 'goodsName',
        },
        {
          title: '商品型号',
          dataIndex: 'goodsModel',
          key: 'goodsModel',
        },


        {
          title: '商品单位',
          dataIndex: 'goodsUnit',
          key: 'goodsUnit',
        },

        {
          title: '上次进价',
          dataIndex: 'lastPurchasingPrice',
          key: 'lastPurchasingPrice',
        },

        {
          title: '单价',
          dataIndex: 'sellingPrice',
          key: 'sellingPrice',
        },
        {
          title: '库存数量',
          dataIndex: 'inventoryQuantity',
          key: 'inventoryQuantity',
        },
        {
          title: '操作',
          dataIndex: 'action',
          align: "center",
          fixed: "right",
          width: 147,
          scopedSlots: {customRender: 'action'}
        }

      ],
      goodsColumns: [
        {
          title: '编号',
          dataIndex: 'goodsId',
          key: 'goodsId',
        },
        {
          title: '商品名称',
          dataIndex: 'goodsName',
          key: 'goodsName',
        },
        {
          title: '商品型号',
          dataIndex: 'goodsModel',
          key: 'goodsModel',
        },

        {
          title: '单价',
          dataIndex: 'price',
          key: 'price',
        },
        {
          title: '数量',
          dataIndex: 'goodsNum',
          key: 'goodsNum',
        },

        {
          title: '单位',
          dataIndex: 'goodsUnit',
          key: 'goodsUnit',
        },

        {
          title: '总金额',
          dataIndex: 'total',
          key: 'total',
        },
      ],
      goodsDataSource: [],
      addForm: {},
      searchForm: {
        state: '',
        amountPaid: '',
        purchaseDate: '',
        amountPayable: '',
        goodsName: '',
        total: 5,
        current: 1,
        pageSize: 5,
        goodsTypeId: ''
      },

      searchList: '',
      url: {
        supplierlist: "/tbPurchaseList/supplierlist",
        goodsList: "goods/goodsList",
        goodsType: "goods/goodsType",
        getGoodsById: "goods/getGoodsById",
        getPurchaseListGoods: "purchaseListGoods/getPurchaseInfoByPurNum",
        addPur: "tbPurchaseList/addPur",
        addPurGoods: "tbPurchaseList/addPurGoods"
      },
      searchUse: [],
      supplier_option: [],
      purchaseList: {},
      state_option: [{
        id: 0,
        value: "未付"
      }, {
        id: 1,
        value: "已付"
      },],
    };
  },

  created() {
    //获取所有商家的选项
    getAction(this.url.supplierlist, this.searchList).then((res) => {
      this.supplier_option = res;
    })
    //按照进货单查询purchaseList_goods
    postAction(this.url.getPurchaseListGoods, this.addForm).then((res) => {
      this.goodsModalSource = res;
    })

  },
  mounted() {
    // 生成订单号的方法
    this.createCode(); //进入页面首先执行一遍这个方法
  },
  methods: {
    //保存
    save() {
      this.purchaseList.purchaseNumber = this.purchaseNumber;
      this.purchaseList.state = this.searchForm.state;
      this.purchaseList.amountPaid = this.searchForm.amountPaid;
      this.purchaseList.purchaseDate = this.searchForm.purchaseDate;
      this.purchaseList.amountPayable = this.searchForm.amountPayable;
      this.purchaseList.supplierId = this.searchForm.supplierId;
      //新增purchaseList
      postAction(this.url.addPur,this.purchaseList).then((res)=>{
        if (res){
          alert("添加成功")
          this.Goods.purchaseListId=res;
        }else{
          alert("添加失败")
        }


      })
    },
    //提交purchaseGoods
    Ok() {
      this.Goods.purchaseNumber=this.purchaseNumber;
      console.log(this.Goods)
      //新增purchaseListGoods
      postAction(this.url.addPurGoods,this.Goods).then((res)=>{
        if (res>0){
          alert("入库成功")
        }else{
          alert("入库失败，请先填写入库单据")
        }
        this.visible2=false
      })




    },
//打开第二个魔态框
    showDrawer(goodsId) {
      this.visible2 = true
      //查询该id的商品进行数据回填
      let pojo = {
        goodsId: goodsId
      }
      postAction(this.url.getGoodsById, pojo).then((res) => {
        this.Goods = res
        console.log(res)
      })
    },
    //提交操作
    ok() {

    },
    //取消操作
    handleCancel() {
    },


    //重置数据
    refresh() {
      this.searchForm.goodsName = null
      this.searchForm.goodsTypeId = null
      this.getGoodsList()
    },
    //魔态框分页
    onChange() {
      this.getGoodsList();

    },
    //弹窗操作

    showModal() {
      this.visible = true;
      //打开框，获取所有商品父节点
      this.getGoodsType(1);
      //打开魔态框，获取所有goods
      this.getGoodsList();
    },
    //获取所有goods
    getGoodsList() {
      getAction(this.url.goodsList, this.searchForm).then((res) => {
        this.goodsModalSource = res.list
        this.searchForm.total = res.total;
        this.searchForm.pages = res.pages;

      })
    },

    //获取子节点
    getGoodsType(pId) {
      let currentId = {
        pId: pId,
      }
      postAction(this.url.goodsType, currentId).then((res) => {
        if (pId === 1) {
          this.goodsChildType.length = 0
          this.goodsType = res;
        } else {
          this.goodsChildType = res;
        }
      })
    },



    createCode() {
      let code = '';//声明一个空的字符串值用于后面赋值
      const codeLength = 13; //验证码的长度，可以根据个人需求改变
      for (let i = 0; i < codeLength; i++) {
        //循环遍历codeLength，值是几，就循环几次
        let index = Math.floor(Math.random() * 10) //Math.floor方法用于返回小于或等于一个给定数字的最大整数；Math.random方法返回 0（含）和 1（不含）之间的随机数
        code += index; //根据索引取得随机数加到code上
      }
      this.purchaseNumber = 'JH' + code; //把code值赋给data中定义好的checkCode
    },


  }
};
</script>
<style lang="scss">
</style>